<template>
	<div class="mobilepageRelation" ref="mobileRelationRef">
		<div class="textCenter onlineBox">{{onlineUserCount || 1}}</div>
		<div :class="{mobileRelationshipItem:true}" v-for="value,index in relationshipList"
			:key="`${value.isGroup}${value.Id}`" @click="handleActive(value.otherId,index)">
			<div class="">
				<div class="TipREDBox">
					<div :class="{TipRED:value.isNewMsgTipRed}"></div>
				</div>
				<el-image class="width50  height50 borderr50 marginR5" :src="value.otherUrl+'?w=200&h=200&q=75'"
					fit="fill">
					<div slot="error" class="image-slot">
						<el-image class="width50  height50 borderr50 marginR5"
							:src="$handledImageError(value.otherUrl+'?w=200&h=200&q=75','tx')" fit="fill"></el-image>
					</div>
				</el-image>
			</div>
			<div class="">
				<div class="mobileRelationshipItemND">
					<div class="mobileRelationshipItemName overflow">
						{{value.otherName}}
					</div>
					<div class="mobileRelationshipItemlasetDate overflow">
						{{ formatDate(value.lastTime,10)}}
					</div>
				</div>
				<div class="mobileRelationshipItemMsg overflow" v-if='value.isGroup===1'>
					{{value.lastMessage || "快来发送第一条消息吧"}}
				</div>
				<div class="mobileRelationshipItemMsg overflow" v-else>
					{{value.lastMessage || "跟好友打个招呼吧~"}}
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import {
		getRelationList
	} from "@/api/relationshipUser"
	import {
		debounce
	} from "@/utils/common.js";
	import Storage from "@/utils/session.js"
	import {
		getdate,
		DateIfSimilar,
		formatDateHMS
	} from "@/utils/base"
	export default {
		name: "pageRelation",
		props: {
			isRequire: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			let pageSizes = 50
			return {
				isShowName: true, //是否显示聊天姓名
				//用户 接受方信息 
				activeItem: {
					type: 1, //信息业务1：文字  11：图片
					fromId: 0, //发送方id
					fromName: "", //发送方名称
					fromUrl: "", //发送方头像
					oldIndex: 0, //上一个
					activeId: 1, //激活id / 接收方id
					isGroup: 1, //是否是群组
					otherName: "社会数官方", //接收方名称
					message: "",
					imagesUrl: "", //图片地址
					isneed: 0, //是否是必须进的群
					msglength: 0, //信息字数
					onlineUsersLength: 1,
				},
				//联系人列表
				relationshipList: [],
				clickActiveCount: 0, //激活点击问题
				newArray: new Array(),
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
			onlineUserCount() {
				return this.$store.getters.userCount
			},
			newMessage() {
				return this.$store.getters.newMessage
			},
			isGetRelationshiplist() {
				return this.$store.getters.isGetRelationshiplist
			},
			//是否执行
			isExecute() {
				return this.$store.getters.isExecute
			}
		},
		mounted() {
			//获取用户信息

			this.$nextTick(() => {
				this.clickActiveCount = 0;
				this.activeItem.fromId = this.storeUserinfo.Id;
				this.activeItem.fromName = this.storeUserinfo.username;
				this.activeItem.fromUrl = this.storeUserinfo.url;
				this.clickActiveCount = 1;
				//获取联系人列表
				this.handlerGetRelatinshipList(this.activeItem.fromId);

			})

		},
		methods: {
			/*获取联系人列表 isflag强制执行*/
			handlerGetRelatinshipList(id,isflag=false) {
				if(!isflag){
					if (this.clickActiveCount == 1) {
						this.clickActiveCount = 0;
					} else {
						return;
					}
				}

				getRelationList({
					fromId: id
				}).then(data => {
					let res = data.data;
					this.relationshipList = new Array();
					let userlist = []
					for (let i = 0; i < res.length; i++) {
						res[i].updateTime = getdate(res[i].updateTime)
						res[i].isNewMsgTipRed = false;
						if (i == res.length - 1) {
							this.$set(this.relationshipList, this.relationshipList.length, res[i]);
						} else {
							this.relationshipList.push(res[i]);
						}
						if (res[i].isGroup === 0) {
							userlist.push(res[i].otherId)
						}

					}
					this.$store.commit("setUserlist", userlist)
				})
			},
			// 时间处理
			handlerDate(arr) {
				for (let i = 0; i < arr.length; i++) {
					arr[i].createTime = getdate(arr[i].createTime)
				}
				return arr;
			},
			//清空激活态
			clearRelationActive() {
				this.relationshipList.forEach((value, index, arr) => {
					value.isActive = 0
				})
			},
			// 激活接受者Id 
			handleActive: debounce(function(otherId, index) {
				this.$set(this.relationshipList[index], "isNewMsgTipRed", false) //消除提示的红点
				this.activeItem.isGroup = this.relationshipList[index].isGroup; //是否是群
				this.activeItem.otherName = this.relationshipList[index].otherName;
				this.activeItem.oldIndex = index; //把当前的索引赋值替换掉旧索引
				this.activeItem.activeId = otherId;
				this.activeItem.isneed = this.relationshipList[index].isneed;
				this.clickActiveCount = 1;
				// 初始化msg页面数据
				this.$store.commit("setactiveItem", {
					...this.activeItem
				})
				// this.$store.commit("SetisshowbottomBox", false) //隐藏底部导航栏
				this.$store.commit("setMobilePageCode", "xinxi"); //激活信息页  后续聊天页返回 切换到本页
				this.$router.push({
					name: "mobilemsg",
					params: {
						code: otherId
					}
				})
			}, 200),

			//判断日期是否相同 index 截取的字数
			formatDate(endd, index = 100) {
				if (!endd) {
					return "";
				}
				return DateIfSimilar(Date(), endd) ? formatDateHMS(endd).substring(0, index) : endd
					.substring(0,
						index);
			},
			//更新红点和信息加时间
			handleTimeMsgUp(activeID, msg, isGroup, isNeedRedTip = false) {
				try {
					this.relationshipList.forEach((value, index, arr) => {
						if (value.otherId === activeID && value.isGroup === isGroup) {
							value.isNewMsgTipRed = isNeedRedTip;
							value.lastTime = this.formatDate(Date(), 10);
							value.lastMessage = msg.substring(0, 18);
							throw new Error("Stop Iterating")
						}
					})
				} catch (error) {
					if (error.message !== 'Stop Iterating') console.log(error.message);
				}
			},
			initInfomation() {
				let userInfo = this.storeUserinfo.Id ? this.storeUserinfo : JSON.parse(Storage.getSession())
				this.activeItem.fromId = userInfo.Id;
				this.activeItem.fromName = userInfo.username;
				this.activeItem.fromUrl = userInfo.url;
			},

		},

		watch: {
			"isRequire": {
				deep: true,
				immediate: true,
				handler: function(value) {
					if (this.clickActiveCount == 1 && value && this.activeItem.fromId && !this.relationshipList) {
						this.clickActiveCount = 0;
					} else {
						return;
					}
					this.handlerGetRelatinshipList(this.activeItem.fromId,true);
				}
			},
			"storeUserinfo": {
				deep: true,
				immediate: true,
				handler: function(newVal) {
					if (this.$store.getters.isExecute) return
					this.initInfomation()
				}
			},
			//刷新 聊天界面
			"isGetRelationshiplist": {
				deep: true,
				immediate: false, // 页面初始化时是否触发回调
				handler: function(newVal, old) {
					if (newVal) {
						this.handlerGetRelatinshipList(this.activeItem.fromId,true);
						this.$store.commit("setIsGetRelationshiplist", false)
					}
				}
			},
			"newMessage": {
				deep: true, // 深度监听
				handler: function(newVal, oldVal) { // 监听属性的回调方法
					//判断消息类型
					if (this.$store.getters.isExecute) return
					let type = newVal.type;
					if (type === 1 && !this.isExecute) {
						//处于移动端时 不处理
						let myId = this.activeItem.fromId; //我是谁 用户ID
						let myActiveId = this.activeItem.activeId; //我的发送目标ID是谁
						let myActiveIsGroup = this.activeItem.isGroup; //我的发送目标是否是群聊
						let fromId = newVal.data.fromId; //发送方 用户ID
						let toActiveId = newVal.data.activeId; //发送方的发送目标 群ID或用户ID
						let isGroup = newVal.data.isGroup; //发送方的发送目标 是否是群聊
						if (myId == fromId && myActiveId == toActiveId && myActiveIsGroup == isGroup) {
							//自己多端发送在同一个页面 包括自己
							this.handleTimeMsgUp(toActiveId, newVal.data.message, isGroup);
						} else if (myId == toActiveId && isGroup == 0) {
							this.handleTimeMsgUp(fromId, newVal.data.message, isGroup, true);
						} else {
							this.handleTimeMsgUp(toActiveId, newVal.data.message, isGroup, true);
						}
					} else if (type === 4) {
						let myId = this.activeItem.fromId; //我是谁 用户ID
						let fromId = newVal.fromId;
						if (myId != fromId) {
							//好友同意请求
							this.$notify({
								title: '系统消息',
								message: `${newVal.fromUsername}成为你的好友了!`,
								type: 'success',
								duration: 750
							});
						}
						// 重新请求联系人
						this.handlerGetRelatinshipList(this.activeItem.fromId,true);
					} else if (type === 9) {
						this.handlerGetRelatinshipList(this.activeItem.fromId,true);
					} else if (type === 2) {
						this.$notify({
							title: '系统消息',
							message: `${newVal.fromUsername}${newVal.message}!`,
							type: 'success',
							duration: 3000
						});
					}
				},
				immediate: false // 页面初始化时是否触发回调
			},


		}

	}
</script>

<style scoped>
	.mobilepageRelation {
		width: 100%;
		height: calc(100% - 76px);
		position: fixed;
		top: 22px;
		/* bottom: 62px; */
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
	}

	.onlineBox {
		position: fixed;
		top: 0;
		margin: 0 auto;
		width: 96%;
		height: 22px;
		line-height: 22px;
		color: #fff;
		box-sizing: border-box;
		padding-right: 20px;
		text-align: right;
		filter: drop-shadow(16px 16px 10px #000) invert(85%);
		z-index: 11;
		border-radius: 6px;
	}

	.onlineBox::before {
		content: "";
		position: relative;
		width: 10px;
		height: 10px;
		right: 8px;
		display: inline-block;
		border-radius: 5px;
		background-color: #ff00ff;
		animation: animationOnline .6s infinite alternate-reverse;
		-webkit-animation: animationOnline .6s infinite alternate-reverse;
	}

	/* 动画代码 */
	@keyframes animationOnline {
		0% {
			background-color: #505050;
		}

		100% {
			background-color: #ff00ff;
		}
	}

	.mobileRelationshipItem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text-align: left;
		cursor: pointer;
		padding: 5px 3px;
		margin-top: 8px;
	}

	.mobileRelationshipItemND {
		display: flex;
		justify-content: space-between;
	}

	/* 时间 */
	.mobileRelationshipItemlasetDate {
		max-width: 19vw;
		font-size: 12px;
		line-height: 18px;
	}

	/* 昵称 */
	.mobileRelationshipItemName {
		max-width: 65vw;
		font-size: 18px;
		background: linear-gradient(90deg, #aaffff, #aaff7f, #aaff00);
		background-size: 0 3px;
		background-repeat: no-repeat;
		background-position: 0 100%;
		transition: 1s all;
		color: #2d2d2d;
	}

	.mobileRelationshipItem:hover .mobileRelationshipItemName {
		background-size: 100% 3px;
		color: #00aaff;
	}

	.mobileRelationshipItemMsg {
		width: 80vw;
		font-size: 16px;
		color: #c1c1c1;
	}




	.MsgTipBox {
		position: relative;
	}

	.MsgTip {
		position: absolute;
		cursor: pointer;
		text-align: center;
		height: 35px;
		line-height: 35px;
		padding: 0 12px 0 12px;
		right: 0px;
		top: -75px;
		border-radius: 12px 0 0 12px;
		background-color: #aaffff;
	}

	.MsgTip:hover {
		background-color: #a2f3f3;
	}

	.MsgTip:active {
		background-color: #94dede;
	}

	.MsgTip span {
		margin-left: 3px;
		font-size: 14px;
	}

	.icon-shuangxiangxiajiantou:before {
		animation-name: example;
		animation-duration: .6s;
		animation-iteration-count: infinite;
		animation-direction: alternate-reverse;
		color: #e6e6e6;
	}

	/* 动画代码 */
	@keyframes example {
		0% {
			color: #e6e6e6;
		}

		100% {
			color: #00aaff;
		}
	}

	/* 消息红点 */
	.TipREDBox {
		position: relative;
	}

	.TipRED {
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		right: 0;
		top: -3px;
		background-color: #f00;
	}

	.hintContentLength {
		display: inline-block;
		position: absolute;
		right: 80px;
		height: 27px;
		line-height: 27px;
		color: #ccc;
		font-size: 12px;
	}

	.hintContentNowLength {
		display: inline-block;
		font-size: 14px;
	}
</style>